<template>
  <view class="vip-info page">
    <div class="wrap">
      <div class="main-img">
        <img class="img" :src="ossDomain + info.coverImg" mode="aspectFill" alt="" />
      </div>
      <div class="text-box">
        {{ info.name }} <br />
        {{ info.enName }}
      </div>
      <div class="price">¥ {{ info.price }}</div>
      <div class="info-text" style="font-size: 24rpx; color: #000">
        <uv-parse :content="info.particulars" :selectable="true" style="color: #000"></uv-parse>
      </div>
    </div>
    <div class="bottom-box">
      <div class="bottom-button-box">
        <div class="button" :class="{ disabled: isVip }" @click="toSubscribe2">
          {{ isVip ? '已订阅 Subscribed' : '订阅 Subscribe' }}
        </div>
        <div :style="{ height: bottomSafeArea + 'px' }"></div>
      </div>
      <div :style="{ height: `calc(${bottomSafeArea}px + 100rpx)` }"></div>
    </div>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
const store = useStore()
import { vipInfo } from '@/utils/api/vip'
import { saveOrder, payOrder } from '@/utils/api/order'
let isVip = computed(() => store.getters['user/isVip'])
const bottomSafeArea = computed(() => store.getters['system/bottomSafeArea'])
import { ossDomain } from '@/utils/oss'
let info = ref<any>(null)

const toSubscribe2 = async () => {
  console.log('toSubscribe')

  interface Params {
    index: number
    tabIndex: number
  }

  let params: Params = {
    index: 3,
    tabIndex: 0
  }
  console.log('开始订阅会员')
  const res = await saveOrder({
    objectId: info.value.id,
    type: 1,
    quantity: 1
  })
  if (res.code !== 200) return
  const payRes = await payOrder({
    orderId: res.data.orderId,
    payType: 1
  })
  if (payRes.code !== 200) return
  let payData = JSON.parse(payRes.data)
  console.log('支付参数', payData)
  wx.requestPayment({
    timeStamp: payData.timestamp,
    nonceStr: payData.noncestr,
    package: payData.package,
    signType: payData.signType,
    paySign: payData.paySign,
    success: function (res) {
      if (res.errMsg == 'requestPayment:ok') {
        console.log('支付成功', res)
        uni.reLaunch({
          url: `/pages/index/index?params=${JSON.stringify(params)}`
        })
        store.dispatch('user/getUserInfo')
      } else {
        setTimeout(() => {
          uni.showToast({
            title: '支付失败',
            icon: 'none'
          })
        }, 100)
        uni.reLaunch({
          url: `/pages/index/index?params=${JSON.stringify(params)}`
        })
      }
    },
    fail(res) {
      setTimeout(() => {
        uni.showToast({
          title: '支付失败',
          icon: 'none'
        })
      }, 100)
      uni.reLaunch({
        url: `/pages/index/index?params=${JSON.stringify(params)}`
      })
    }
  })
}

onLoad(() => {
  vipInfo().then((res) => {
    console.log(res)
    info.value = res.data[0]
  })
})
</script>

<style lang="scss" scoped>
@import './vipInfo.scss';
</style>
